<template>
    <view>
        <view class="actconBoxList">
        <block v-for="(item, index) in teamlist" :key="index">
          <ActivityCell :item="item"></ActivityCell>
            <view class="btnBox">
                <view class="btn_" @click.stop="auditItem(item,-1,index)">
                    拒绝
                </view>
                <view class="btn_ btn_soild" @click.stop="auditItem(item,0,index)">
                    同意
                </view>
            </view>
        </block>
      </view>

      <uni-popup type="center" ref="cirishBox">
      <view class="cirPop">
        <view class="group_textarea">
          <view class="dectitle">拒绝理由</view>
          <textarea style="width: 100%;height: 54%; font-weight: 400;" :value="auditRemark"
            placeholder="请填写拒绝理由，不写则默认为：很抱歉您的圈子不符合动魅相关规定。" placeholder-class="remtext" maxlength="1000"
            @input="inputrem" />
        </view>
        <view class="subBtn" @click="refuseCir()">确定</view>
      </view>
    </uni-popup>
    </view>
</template>

<script>
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
components: {
    ActivityCell
},
data() {
return {
    isMore:true,
    PageIndex:1,
    PageSize:10,
    longitude:'',
    latitude:'',
    searchContent:'',
    teamlist:[],
    auditRemark:'',
    nowInfo:{},
};
},
onLoad(){
    this.getActList()
},
// 触底事件
  onReachBottom() {
    if(this.isMore){
        this.PageIndex++
        this.getActList()
    }
  },
methods: {
  async apiSignComfirm(id, status, index) {
      let remak = status==0?'':(this.auditRemark || '很抱歉您的圈子不符合动魅相关规定')
      this.$api.post('Appointment/Audit', {
        ID: id,
        Status: status,
        AuditRemark: remak
      }).then(res => {
        const { code, data, message } = res
        if (code == 0) {
          this.teamlist.splice(index, 1)
          this.$pv.msg('操作成功');
          this.nowInfo = {
            id: 0,
            index: 0,
          }
          this.$refs.cirishBox.close()
        } else {
          this.$pv.msg(message);
        }

      });

    },
  // 填写原因拒绝审核
    refuseCir() {
      this.apiSignComfirm(this.nowInfo.id, -1, this.nowInfo.index)
    },
  inputrem(e) {
      const { value, cursor } = e.detail
      let str = this.$util.entitiesToUtf16(value)
      if (str.length > 100) {
        this.auditRemark = str.slice(0, 100)
      } else {
        this.auditRemark = str
      }
    },
  async auditItem(item,status,index){
    if(status == -1){
      this.auditRemark = ''
      this.$refs.cirishBox.open()
      this.nowInfo = {
          id: item.ID,
          index: index
        }
      return
    }
    let _this = this;
		let text = status == 0 ? '同意' : '拒绝'
    let remak = status==0?'':(this.auditRemark || '很抱歉您的圈子不符合动魅相关规定')
    let content = `确定要${text}该活动吗？`
    uni.showModal({
				title: '温馨提示',
				content: content,
				confirmText: text,
				success: async function (rs) {
					if (rs.confirm) {
						// let res1 = await _this.$api.post('Appointment/Audit',{
            //   ID:item.ID,
            //   Status:status,
            //   AuditRemark: remak
            // })
            // if(res1.code == 0){
            //   _this.teamlist.splice(index,1)
            // }else{
            //   _this.$pv.msg(res1.message);
            // }
            _this.apiSignComfirm(item.ID, status, index)
					} else if (rs.cancel) {
					}
				}
		});
  },
    // 获取列表
    async getActList() {
      let res = await this.$api.post("Appointment/AuditList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.teamlist = res.data
        } else {
          this.teamlist = this.teamlist.concat(res.data)
        }
        this.isMore =
              Array.isArray(res.data) && res.data.length >= this.PageSize;
      }

    },
  
},

}
</script>
<style lang='scss'>
.actconBoxList {
  width: 100%;
  padding: 40rpx 20rpx;
//   margin-top: 200rpx;
}
.btnBox {
        display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 10;
    margin: 30rpx 0;
    .btn_ {
        margin-right: 24rpx;
        font-size: 20rpx;
        color: #333333;
        padding: 20rpx 48rpx;
        border-radius: 50rpx;
        border: 2rpx solid #E4E4E4;
        min-width: 100rpx;
    }

    .btn_soild {
        color: #fff;
        background: #706EEE;
        border: 2rpx solid #706EEE;
    }
}
.cirPop {
  width: 644rpx;
  max-height: 1030rpx;
  background-color: #FFFFFF;
  overflow: auto;
  border-radius: 54rpx;
  padding: 40rpx;

  .group_textarea {
    height: 264rpx;
    margin-top: 30rpx;
    // background-color: #fff;
    // padding-left: 32rpx;
    // text-indent: 2em;
    box-sizing: border-box;
    position: relative;

    .remtext {
      font-size: 28rpx !important;
      color: #C2C2C2 !important;
      font-weight: 400 !important;
    }

    .dectitle {
      margin-bottom: 25rpx;
    }

    .count {
      position: absolute;
      bottom: 15rpx;
      right: 15rpx;
      font-size: 24rpx;
      color: #C2C2C2;
    }

    /deep/ .u-textarea {
      background: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      border-bottom: none !important;
      padding: 0 !important;
      height: 100% !important;
      text-indent: 2em;
    }

    /deep/ .u-textarea__count {
      background: none !important;
      color: #0d0d0d !important;
    }

    /deep/ .u-textarea__field {
      color: #0d0d0d !important;
      font-size: 28rpx !important;
      height: 100% !important;
    }
  }

  .subBtn {
    margin: 20rpx auto;
    font-size: 20rpx;
    color: #fff;
    padding: 20rpx 48rpx;
    border-radius: 50rpx;
    min-width: 100rpx;
    background: #706EEE;
    border: 2rpx solid #706EEE;
    text-align: center;

  }
}
</style>